<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>福田区高训大厦</title>	<!--标题-->
		<style type="text/css">
			#adImage {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<a style="font-size: 30px;" href="https://www.baidu.com">本地页面打开baidu链接</a></br>
		
		<a target="_blank" style="font-size: 30px;color: #329900;" href="https://www.baidu.com">新页面打开baidu链接</a>
		<marquee>
			我是跑马灯
		</marquee>
	
		<img id="adImage" src="test.jpeg" width="200" height="200" onmouseover="clearTimer()" onmouseout="startMove()" onclick="openWeb()"/>
		<img src="a.jpg" width="200" height="100" />
		<script type="text/javascript">
			let x = 0;
			let y = 0;
			var adImage = document.getElementById("adImage")		//获取到对象
			var mWidth = adImage.width		//获取图片的宽度
			var mheight = adImage.height	//获取图片的高度
			var maxMoveWidth = window.innerWidth - mWidth	//计算可以移动的宽度
			var maxMoveHeight = window.innerHeight - mheight	//计算可以移动的高度
			const speed = 2;	//定义速度 常量const
			let dx = speed
			let dy = speed
			var timer;
			function move(){
				x += dx
				y += dy
				if(x >= maxMoveWidth || x<=0){	// || 逻辑或运算符 
					dx = -dx
				}
				if(y >= maxMoveHeight || y<=0){	// || 逻辑或运算符
					dy = -dy
				}
				adImage.style.left = `${x}px`
				adImage.style.top = `${y}px`
			}
			
			function clearTimer(){
				window.clearInterval(timer)		//清除定时器
			}
			
			function startMove(){
				timer = setInterval(move,30)		//定时器
			}
			
			function openWeb(){
				window.location.href = "https://baidu.com"
			}
		</script>
		<h1>我的第一个标题</h1>
		<h2>我的第一个标题</h2>
		<h3>我的第一个标题</h3>
		<h4>我的第一个标题</h4>
		<h5>我的第一个标题</h5>
		<ol>	<!--有序列表-->
			<li>高训大厦</li>
			<li>高训大厦</li>
			<li>高训大厦</li>
		</ol>
		
		<ul>	<!--无序列表-->
			<li>福田区</li>
			<li>福田区</li>
			<li>福田区</li>
		</ul>
		<input width="200" height="50" />
		<button style="width: 200px; height: 50px; background-color: bisque;" type="button" onclick="startMove()">开始移动</button>
	</body>
</html>